<template>
	<view class="classify">
	    <view class="content">
		    <view>
				<scroll-view class="contentLeft" :scroll-y="true" >
					<view v-for="(item,index) in childrenList" :key="index">
						<view :class="appId==index?'app':''" class="contentLeft_top">
							<text @click="click(index)">{{item.title}}</text>  
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="contentRight"  >
				<scroll-view :scroll-y="true">	
				<view v-for="(item,index) in childrenLista" :key="index"  v-show="appId==index">
					<view v-for="(item,index) in item.childrenList" :key="index"  class="contentRight_contnet" >
						<view class="contentRight_text">{{item.title}}</view>
						<view class="contentRight-Name">
							<view class="classify-box" v-for="(itemx,index) in item.childrenList" :key="index">
								<view @click="classify(item.id)">
									<image :src="itemx.picUrl"></image>
									<view>{{itemx.title}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				</scroll-view>
			</view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				childrenList:'',
				childrenLista:[],
				appId:0,
			}
		},
		
		onLoad() {
			uni.request({
				url:this.$C.webUrl+'m.api?_gp=category&_mt=categoryList',
				success: (res) => {
					this.childrenList=res.data.data
					// this.childrenLista=res.data.data[0].childrenList
					for (let i in this.childrenList) {
						this.childrenLista[i]=this.childrenList[i]
					}
					console.log(this.childrenLista)
				}
			})
		},
		methods: {
			classify(e){
				console.log(e)
				uni.navigateTo({
					url:'../lists/index?id='+e
				})
			},
			click(e){
				this.appId=e
			}
		}
	}
</script>  

<style>
.uni-body .pages-classify-classify{
	height: 100%;
}
.contentLeft_top{
	width: 100%;
	height: 100%;
}
.classify-box{
	margin:20upx;
}
.contentRight_contnet{
	margin: 20upx 0px;
}
.contentRight_text{
	margin-left: 25upx;
}
.contentRight-Name image{
	width: 130upx !important;
	height: 130upx !important;
	display: inline-block;
}
.contentRight-Name{
	width: 90%;
	padding: 8upx 0upx;
	
	margin: auto;
	background: #FFFFFF;
	display: flex;
	
}
.app{
	color:#F0AD4E;
	background: #F8F8F8;
}
.classify{    
	height: 642px;
	font-size: 30upx;
}
.content{
	width: 100%;
	height: 642px;
	display: flex;
    justify-content: space-between;
}
.contentLeft text{
	text-align: center;
	margin: auto;
}
.contentLeft{
	width: 200rpx;
	height: 100%;
}
>>> .contentLeft view{
	display: flex;
	height: 60px;
	border-bottom: 1px solid #F8F8F8;
}
.contentRight{
	width: 73.1%;
	height: 642px;
	background: #F8F8F8;
}
.contentRight scroll-view{
	height: 642px;
}
.contentRight image{
	width: 200upx;
	height: 200upx;
}
</style>
